<!--逾期情况-->
<script setup lang="ts">
/*
 * 逾期情况
 * */
defineOptions({
  name: "OverdueSituation",
  inheritAttrs: false,
});
import * as echarts from "echarts";
import numeral from "numeral";
import { getOverdueSituation } from "@/api/order";
import { OverdueSituation } from "@/api/order/types";

const props = defineProps({
  id: {
    type: String,
    default: "barChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
});

const selectOptions = [
  {
    value: "0",
    label: "全部",
  },
  {
    value: "1",
    label: "双皮奶",
  },
  {
    value: "2",
    label: "蚵仔煎",
  },
  {
    value: "3",
    label: "龙须面",
  },
  {
    value: "4",
    label: "北京烤鸭",
  },
];
//下拉框选中value
let value = ref("");

const chart = ref<any>("");
const loading = ref(false); //加载状态
const overdueSituation = ref<OverdueSituation>({}); //逾期情况数据源
//绑定图表
function bindChart() {
  getOverdueSituation()
    .then(({ data }) => {
      overdueSituation.value = data;
      loading.value = true;
      // 图表初始化
      chart.value = markRaw(
        echarts.init(document.getElementById(props.id) as HTMLDivElement)
      );

      chart.value.setOption({
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            min: 0,
            max: 4,
            interval: 1,
            data: ["01", "02", "03", "04", "05"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 400,
            interval: 100,
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        series: [
          {
            name: "逾期",
            type: "bar",
            data: data.overdueAmount,
            barWidth: 40,
            itemStyle: {
              color: "#8794fc",
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });

      // 大小自适应
      window.addEventListener("resize", () => {
        chart.value.resize();
      });
    })
    .finally(() => {
      loading.value = false;
    });
}
onMounted(() => {
  bindChart();
});
</script>

<template v-loading="loading">
  <el-card class="text-3">
    <template #header>
      <div class="flex-between">
        <span class="title-font">逾期情况</span>
        <div>
          <el-button type="primary" class="b-rd-3 mr-10px" size="small"
            >查看列表</el-button
          >
          <el-select
            class="w-[100px] b-rd-3"
            size="small"
            v-model="value"
            placeholder="全部"
          >
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </template>
    <el-row :gutter="3" class="bg-color lh-21px">
      <el-col :xs="8" :sm="8" :lg="8" class="cursor-pointer">
        <el-card shadow="never" class="flex-center">
          <div class="text-left py-6px h-[76px]">
            <div class="font-bold color-#8a4ae6 text-4">
              ￥{{ numeral(overdueSituation.sumConsumption).format() }}
            </div>
            <div class="text-nowrap">累计消费金额</div>
            <div>占比：{{ overdueSituation.sumConsumptionRate }}%</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="8" :sm="8" :lg="8" class="cursor-pointer">
        <el-card shadow="never" class="flex-center">
          <div class="py-6px text-left h-[76px]">
            <div class="font-bold color-#8a4ae6">
              <span class="text-4">{{ overdueSituation.orderQty }}</span
              >个
            </div>
            <div class="text-nowrap">累计逾期订单数</div>
            <div>占比：{{ overdueSituation.orderQtyRate }}%</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="8" :sm="8" :lg="8" class="cursor-pointer">
        <el-card shadow="never" class="flex-center">
          <div class="py-6px text-left pt-6 h-[76px]">
            <div class="font-bold">
              <span class="color-red text-5">{{
                overdueSituation.badRate
              }}</span
              >%
            </div>
            <div class="flex-center">
              <span>不良率</span>
              <el-tooltip
                class="item"
                effect="dark"
                content="以上为上期的逾期不良订单"
                placement="bottom-end"
              >
                <svg-icon icon-class="reject-ratio" size="1.2em" />
              </el-tooltip>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <span class="float-left pl-2% pt-20px">单位：万元</span>
    <div :id="id" :class="className" :style="{ height, width }"></div>
  </el-card>
</template>

<style lang="scss" scoped>
:deep .el-input__wrapper {
  border-radius: 8px !important;
}

:deep .el-card__header {
  padding: 0.7em;
}

.el-card {
  border: 0;
  border-bottom: 1px solid $bodyBgColor !important;
  border-radius: 0;
}

:deep .el-card__body {
  padding: 0;

  .el-row {
    background-color: $bodyBgColor;

    .el-col {
      cursor: pointer;
    }
  }
}
</style>
